<!doctype html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link href="css/mui.min.css" rel="stylesheet" />
		<link rel="stylesheet" type="text/css" href="css/public.css"/>
		<script src="js/mui.min.js"></script>
		<script type="text/javascript">
			mui.init()
		</script>
		<style>
			.mui-button-row{background: none!important;}
			.mui-content{padding: 15px;margin: 0 0 50px 0;background:#FCFCFC ;}
			.mui-content p,.mui-content h3{text-align: center;line-height: 35px;}
			.mui-content h3{margin: 0 0 20px 0;}
			.pwd-box{  
		        width:80%;
		        height: 44px;
		        position: relative;  
		        border: 1px solid #999999;  
		        /*border-radius: 3px;*/  
		        overflow:hidden;
		        margin: 10px auto;
		    }  
		    .pwd-box input[type="number"]{  
		        width: 100%;  
		        height: 100%;  
		        /*color: transparent;  */
		        /*letter-spacing 属性增加或减少字符间的空白*/
		        /*letter-spacing: 35px;*/
		        position: absolute;  
		        top: 0;  
		        left: 0;  
		        border: none;  
		        font-size: 18px;  
		        opacity: 0;  
		        z-index: 1;       
		        outline: none;
		    }
		    .fake-box {
		        width: 100%;
		        height: 100%;
		        display: flex;
		        flex-flow: row;
		    }
		    .fake-box input{
		        flex: 1;
		        width: 100%;  
		        height: 100%;  
		        border: none;  
		        border-right: 1px solid #999999;  
		        text-align: center;  
		        font-size: 30px;
		        float: left;  
		        border-radius: 0;
		    }  
		    .fake-box input:nth-last-child(1){  
		        border:none;  
		    } 
		</style>
	</head>

	<body>
		<div id="headerNav"></div>
		<div class="mui-content" style="margin-top: 45px;">
		    <p style="color: #999999;font-size: 16px;">请设置您的支付密码</p>
		    <h3 style="color: #000000;font-size: 18px;">设置6位数字支付密码</h3>
		    <div class="pwd-box">  
			    <input type="number" maxlength="6" class="pwd-input" id="pwd-input" autofocus="">  
			    <div class="fake-box">  
			        <input type="password" readonly="">  
			        <input type="password" readonly="">  
			        <input type="password" readonly="">  
			        <input type="password" readonly="">  
			        <input type="password" readonly="">  
			        <input type="password" readonly="">  
			    </div>  
			</div>  
		    <p style="color: #999999;font-size: 14px;">支付密码不能是重复 连续的数字</p>
		    <div class="mui-button-row" style="background:white;margin-top:22px;">
				<button type="button" class="mui-btn mui-btn-primary payBtn" style="width:93%;height:50px;background:#5763FF;font-size: 16px;" id='btn'>完成</button>
			</div>	
		</div>
	</body>
	<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
	<script type="text/javascript">
		$('#headerNav').load('header.html',function(){
			$('header h1').html('设置支付密码');
		});
		mui('body').on('tap','a',function(){
	        window.top.location.href = this.href;
	    })
		mui.ready(function(){
			 $("#pwd-input").on("input", function() {  
		        // trim(): 去两边空格的方法；
		        var pwd = $(this).val().trim();  
		        for (var i = 0; i < pwd.length; i++) {  
		            $(".fake-box input").eq(i).val(pwd[i]);  
		        }  
		        $(".fake-box input").each(function() {  
		            var index = $(this).index();  
		            if ( index >= pwd.length ) {  
		                $(this).val("");  
		            }  
		        });  
		        if (pwd.length == 6) {  
		        	var pay_pass = $(this).val(); 
			            $('#btn').click(function(){
		        			console.log(pay_pass);	
			            	var a = window.localStorage.state;
							var b = window.localStorage.data;
							console.log(b);
			            	$.ajax({
							type: "post",
							url: "http://mall.itcn99.com/i/index/Set_pay_pass",
							dataType: "jsonp",
							async: true,
							data: {
								"uid":b,
								"pay_pass":pay_pass,
							},
							success: function(data) {
								console.log(data);
								if(data.state==1){
									window.localStorage.setItem('payPass','0');
								}
								window.location.href="index.html"
							}
						})
		            })
		        }  
		    }); 
		})
	</script>
</html>